<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <!-- favicon -->
    <link rel="shortcut icon" href="./img/favicon.ico">
    <!-- fonts -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <!-- style 1.jquery-weui -->
    <link rel="stylesheet" href="./lib/dist/css/weui.min.css">
    <link rel="stylesheet" href="./lib/dist/css/jquery-weui.css">
    <!-- <link rel="stylesheet" href="lib/dist/css/bootstrap.min.css"> -->
    <!-- style 公共koala样式 -->
    <link rel="stylesheet" href="./css/publicfile.css">
</head>
<body class="bg-gray">
    <div class="main">
        <!-- 搜索 -->
        <div class="search afixd">
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search" style="margin-top: 0;"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索店内产品" required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                        <i class="weui-icon-search"></i>
                        <span>搜索店内产品</span>
                    </label>
                </form>
    <!--            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>-->
            </div>
        </div>
        <div class="search-height" style="height: 48px;"></div>
        <!-- Swiper 轮播图 -->
        <div class="swiper-container swiper-banner swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/temp/banner_1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/temp/banner_1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/temp/banner_1.jpg" alt=""></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <!-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
        </div>
        <!-- 字体图标 -->
        <div class="menu-list">
            <ul>
                <li>
                    <a href="javascript:">
                        <span><i class="icon-international"></i></span>
                        <h5>国际标准</h5>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span><i class="icon-certification"></i></span>
                        <h5>工匠认证</h5>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span><i class="icon-profession"></i></span>
                        <h5>专业培训</h5>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span><i class="icon-share"></i></span>
                        <h5>共享多赢</h5>
                    </a>
                </li>
            </ul>
        </div>
        <!-- container内容 -->
        <div class="last-active common-swiper">
            <h4 class="text-center"><span class="pull-left"></span>蜜源寻蜜<span class="pull-right"></span></h4>
            <div class="banner-map">
                <a href="html/beehive_list.html"><img src="img/temp/map.jpg"></a>
            </div>
            <div class="link-list">
                <ul>
                    <li>
                        <a href="html/bee_farm_list.html">
                            <span><i class="icon-factory"></i></span>
                            <span>蜂场</span>
                        </a>
                    </li>
                    <li>
                        <a href="html/craftsman_list.html">
                            <span><i class="icon-craftsman"></i></span>
                            <span>工匠</span>
                        </a>
                    </li>
                    <li>
                        <a href="html/beehive_list.html">
                            <span><i class="icon-honey"></i></span>
                            <span>蜂箱</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="swiper-container swiper-container-active swiper-container-horizontal">
                <div class="swiper-wrapper" style="transform: translate3d(-296px, 0px, 0px); transition-duration: 0ms;">
                    <div class="swiper-slide swiper-slide-prev">
                        <div class="active-list">
                            <a href="html/committee.html#tab1">
                                <!-- 此处图片比例为3:2 -->
                                <img src="img/temp/active_1.jpg">
                                <div class="active-list-pro">
                                    <h5>工匠认证</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-active">
                        <div class="active-list">
                            <a href="html/committee.html#tab2">
                                <img src="img/temp/active_2.jpg">
                                <div class="active-list-pro">
                                    <h5>专委会介绍</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide-next">
                        <div class="active-list">
                            <a href="html/committee.html#tab3">
                                <img src="img/temp/active_4.jpg">
                                <div class="active-list-pro">
                                    <h5>专业培训</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="active-list">
                            <a href="html/committee.html">
                                <img src="img/temp/active_3.jpg">
                                <div class="active-list-pro">
                                    <h5>专委会介绍</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination" style="display: none;"></div>
            </div>
            <div class="banner-video">
                <a href="html/video_list.html"><img src="img/temp/index_02.png"></a>
                <div class="cover-words">
                    <h3>蜜蜂视界</h3>
                    <p>Bees horizon</p>
                </div>
            </div>
            <div class="majors-title">
                <a href="">
                    <p>We have a professional certification rating committee</p>
                    <span>我们有专业的专委会评级认证</span>
                </a>
            </div>
            <div class="index_science">
                <h4 class="text-center"><span class="pull-left"></span>好蜜科普<span class="pull-right"></span></h4>
                <ul>
                    <li>
                        <a href="html/popular_science_list.html">
                            <img src="img/temp/science_1.jpg" alt="">
                            <span>蜜源探秘</span>
                        </a>
                    </li>
                    <li>
                        <a href="html/popular_science_list.html">
                            <img src="img/temp/science_2.jpg" alt="">
                            <span>蜂蜜常识</span>
                        </a>
                    </li>
                    <li>
                        <a href="html/popular_science_list.html">
                            <img src="img/temp/science_3.jpg" alt="">
                            <span>蜂蜜种类</span>
                        </a>
                    </li>
                    <li>
                        <a href="html/popular_science_list.html">
                            <img src="img/temp/science_4.jpg" alt="">
                            <span>蜂蜜价值</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="to-top" style="display: block;"><a href="#top"><span><i class="icon-stick"></i></span></a></div>
    <!-- <?php include("footer.php");?> -->

    <!-- tabbar，底部导航 -->
    <div class="weui-tab" style="bottom: 0;">
        <div class="weui-tab__bd"></div>

        <div class="weui-tabbar">
            <a href="index.html" class="weui-tabbar__item weui-bar__item--on">
                <!-- <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> -->
                <div class="weui-tabbar__icon">
                    <i class="iconfont icon-home"></i>
                </div>
                <p class="weui-tabbar__label">首页</p>
            </a>
            <a href="html/beehive_list.html" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <i class="iconfont icon-location-red"></i>
                </div>
                <p class="weui-tabbar__label">蜜源寻蜜</p>
            </a>
            <a href="#tab3" class="weui-tabbar__item">
                <div class="weui-tabbar__icon">
                    <i class="iconfont icon-center"></i>
                </div>
                <p class="weui-tabbar__label">会员中心</p>
            </a>
        </div>
    </div>

    <!-- JS -->
    <script src="./lib/jquery/jquery-2.1.4.js"></script>
    <!-- Failed to load resource：net：ERR说明缓存读取失败，可能是缓存文件被意bai外清除，一般是使用第三方清理程序清理浏览器导致； 解决方式：重新卸载安装Chrome浏览器； -->

    <!-- Swiper -->
    <script src="./lib/dist/js/swiper.js"></script>
    
    <!-- Initialize Swiper -->
    <script>
        //幻灯片初始化
        $(".swiper-banner").swiper({
            loop: true,
            autoplay: 3000
        });
        //swiper 滑动
        var mySwiper = new Swiper('.swiper-container-active', {
            roundLengths : true,
            initialSlide :1,
            speed:600,
            slidesPerView:"auto",
            centeredSlides : true,
            followFinger : false,
    //        spaceBetween: 30,
        });
        // 返回顶部
        $(document).ready(function(){
            //首先将#to-top隐藏
            $("#to-top").hide();
            //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
            $(function () {
                $(window).scroll(function(){
                    if ($(window).scrollTop()>100){
                        $("#to-top").fadeIn(1500);
                    }
                    else
                    {
                        $("#to-top").fadeOut(1500);
                    }
                });
                //当点击跳转链接后，回到页面顶部位置
                $("#to-top").click(function(){
                    $('body,html').animate({scrollTop:0},500);
                    return false;
                });
            });
        });
    </script>
      <!-- jqweui -->
    <script src="lib/dist/js/jquery-weui.js"></script>

</body>

</html>